<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="区域活跃度" name="area">
                <area-active v-if="activeName=='area'"></area-active>
            </el-tab-pane>
            <el-tab-pane label="教师活跃度" name="teacher">
                <teacher-active v-if="activeName=='teacher'"></teacher-active>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import areaActive from './comps/areaActive';
    import teacherActive from './comps/teacherActive';
    import parentsActive from './comps/parentsActive';
    import studentActive from './comps/studentActive';
    export default {
        name: 'rolesActiveDetail',
        components: {Levelbar, areaActive, teacherActive, parentsActive, studentActive},
        data() {
            return {
                activeName: 'area'
            };
        },
        computed: {
            
        },
        methods: {
            handleClick(tab, event) {
                this.activeName = tab.name;
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
   .app-container{
        position: relative;
        padding: 20px 20px 10px;
        width: 1400px;
        margin: 0 auto;
    }
</style>
